<template>
  <div class="container" v-loading="loading">
    <div class="store-container" style="font-size: 20px">
      <el-row class="integral-content" style="background: #ba95e8">
        <el-col :span="24">
          <div class="set-meal">
            <div>套餐一</div>
            <div>兑换次数：3</div>
            <div>消耗积分：1</div>
            <div><el-button type="primary" size="large" @click="exchange(3,1)">兑换</el-button></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="integral-content" style="background: #47d7b1">
        <el-col :span="24">
          <div class="set-meal">
            <div>套餐二</div>
            <div>兑换次数：15</div>
            <div>消耗积分：5</div>
            <div><el-button type="primary" size="large" @click="exchange(15,5)">兑换</el-button></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="integral-content" style="background: #5bb1ea">
        <el-col :span="24">
          <div class="set-meal">
            <div>套餐三</div>
            <div>兑换次数：35</div>
            <div>消耗积分：10</div>
            <div><el-button type="primary" size="large" @click="exchange(35,10)">兑换</el-button></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="integral-content" style="background: #e5b46c">
        <el-col :span="24">
          <div class="set-meal">
            <div>套餐四</div>
            <div>兑换次数：70</div>
            <div>消耗积分：20</div>
            <div><el-button type="primary" size="large" @click="exchange(70,20)">兑换</el-button></div>
          </div>
        </el-col>
      </el-row>
      <el-row class="integral-content" style="background: #e8745f">
        <el-col :span="24">
          <div class="set-meal">
            <div>套餐五</div>
            <div>兑换次数：100</div>
            <div>消耗积分：15</div>
            <div><el-button type="primary" size="large" @click="exchange(100,25)">兑换</el-button></div>
          </div>
        </el-col>
      </el-row>

      <el-row class="integral-content" style="background: #c7c7c7">
        <el-col :span="24">
          <div class="set-meal">
            <p>暂无更多</p>
          </div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import myAxios from "../../../plugins/myAxios.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const loading =  ref(false);

/**
 * 积分兑换
 * @param handleCount 兑换次数
 * @param integralCount  消耗的积分
 */
const exchange  = async (handleCount,integralCount) => {
  loading.value = true;
  const res = await myAxios.post('/integral/exchange',{
    exchangeInvokeCount:handleCount,
    exchangeIntegralCount:integralCount
  }).catch(() => {
    ElMessage({
      type: 'error',
      message: '服务器内部错误',
    })
  });
  if(res.code  === 40100 && res.message === '未登录'){
    router.push({path: '/login', replace: true});
    ElMessage.error("用户未登录")
    return ;
  }
  if(res.code === 0 && res.data === true){
    ElMessage.success("兑换成功");
  }else if(res.code === 0 && res.data === false){
    ElMessage.warning("积分不足");
  }else{
    ElMessage.error(res.message);
  }
  loading.value = false;
}


</script>

<style scoped lang="less">
.container{
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url("../../../assets/img/appearance/bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  //background: red;
  .store-container{
    margin: 10px;
  }
}
.el-row {
  //background: red;
  height: 100px;
  margin-bottom: 10px;
}
.store-head{
  //background: #3c7ede;
  height: 80px;
  padding: 5px;
  text-align: center;
  align-items: center;
}
.integral-content{
  cursor:pointer;
  height: 110px;
  padding: 8px;
  //border: 1px solid red;
  box-shadow: 0 0 4px 0 #a8bcea;
  border-radius: 20px;
  transition: transform 0.3s ease,box-shadow 0.3s ease;;
}
.integral-content:hover{
  box-shadow: 0 0 7px 0 #80acf3;
  transform: translate(-2px,-2px);
}

.set-meal{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

</style>